<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='文章评论数量统计',active='count'">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.js"></script>
</head>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="back/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">文章评论数量统计</h4>
                    </div>
                    <div class="col-md-12">
                        <div id="main" :style="{width: '1200px', height: '500px'}" ></div>
                    </div>
                </div>
                <div th:replace="back/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>

<script type = "text/javascript">

        var vm = new Vue({
            el:'#main',
            // data:{
            //     count:"",
            //     titles:"",
            //     value:""
            // },
            mounted(){
                let _this = this
                    //发送get请求
                    this.$http.get('http://localhost:8081/count').then(function(res){
                        names = res["body"]["names"]
                        values = res["body"]["values"];
                        console.log(res["body"]["names"]);
                        var Chart = echarts.init(document.getElementById('main'));

                        var option = {
                            title: {
                                text: '文章评论数量统计',
                                left: 'center',
                                top: 20,
                                textStyle: {
                                    color: '#555555'
                                }
                            },
                            toolbox: {
                                show : true,
                                feature : {
                                    /* line是折线图，bar是柱形图*/
                                    magicType: {show: true, type: ['line', 'bar']},
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: names,
                                axisLabel: {
                                    interval:0,
                                    rotate:-15,
                                }
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: values,
                                    type: 'bar'
                                }

                            ]
                        };


                        Chart.setOption(option);


                    },function(){
                        console.log('请求失败处理');
                    });
            }
        });




</script>
</body>
</html>



